<template>
	<view class="uni-swiper-page">
		<view class="page-header">
			<slot name="header"/>
		</view>

		<scroll-view
			:class="[anit?'anit':'anitnone','swiper-scroll']"
			scroll-y="true"
			:enable-flex="true"
			scroll-with-animation
			:lower-threshold="80"
			:refresher-threshold="60"
			:refresher-triggered="refreStatus"
			:refresher-enabled="refresher&&enabled"
			:swiper-item="item.pageid"
			:refresher-background="refresherColor"
			:scroll-top="scrollTop"
			@refresherpulling="onPulling"
			@refresherrefresh="onRefresh"
			@refresherrestore="onRestore"
			@scrolltolower="onLower"
			@refresherabort="onAbort"
			@scroll="onScroll"
		>
			<slot/>
			
			<view class="bottom">
				<uni-load-more iconType="snow" :status="status" color="#999" :iconSize="18"/>
			</view>
				
		</scroll-view>
		<mo-fab :class="[!showTopBtn&&'top-hide']" v-if="topButton" :defaultY="260" defaultPost="right">
			<view :class="[!showTopBtn&&'top-hide','top-btn']" @click="onScrollToTop">
				<text>Top</text>
			</view>
		</mo-fab>
	</view>
</template>

<script>
	export default {
		props: {
            params: {
                type: Object,
                default: ()=>{}
            },
			item: {
				type: Object,
				default: ()=>{}
			},
			itemIndex: {
				type: Number,
				default: 0
			},
			topButton: {
				type: Boolean,
				default: true
			},
			refresher: {
				type: Boolean,
				default: true
			},
			refresherColor: {
				type: String,
				default: 'transparent'
			},
		},
		data() {
			return {
				refreStatus: false,
				enabled: true,
				anit: true,
				scrollTop: 0,
				oldScrollTop: 0,
				showTopBtn: false,
				
				// 加载数据
				data:[],
				dataList: [],
				isLoading: false,
				LoadText: '正在加载···',
				finish: false,
				size: 15,
				page: 1,
				total: 0
			}
		},
		computed:{
			status(){
				let statusType = this.isLoading ? 'loading' : 'more'
				statusType = this.finish ? 'noMore' : statusType
				return statusType
			},
			action(){
				return this.item.action
			}
		},
        mounted() {
            // console.log(102,this.item)
        },
		methods: {
			onPulling(e){
				this.anit = false
			},
			onRestore(e){
				this.anit = true
				setTimeout(function(){
					this.anit = false
				}, 200)
			},
			
			// 下拉事件
			async onRefresh(e){
				if(this.isLoading) return
				// console.log(72,'下拉事件')
				this.refreStatus = true;
				await this.initData()
				this.refreStatus = false;
				e.stopPropagation()
			},
			// scrolltolower触底
			onLower() {
				if(this.isLoading) return
				// console.log(77,'scrolltolower触底')
				this.moreList()
			},
			onAbort(){
				this.refreStatus = false;
			},
			onScroll(e){
				this.enabled = e.detail.scrollTop < 100
				this.oldScrollTop = e.detail.scrollTop
				this.showTopBtn =  e.detail.scrollTop > 500
			},
			onScrollToTop(){
				if(!this.showTopBtn) return
				this.scrollTop = this.oldScrollTop
				this.$nextTick(function() {
					this.scrollTop = 0
				});
			},
			async initData(){
				if(!this.refreStatus) return
				this.finish = false
				this.loadingText = "加载中..."
				this.page = 1
				await this.getList();
				this.data = this.dataList
				this.checkFinish()
				this.$emit('setPageData', this.data)
				// uni.stopPullDownRefresh();
				this.refreStatus = false
			},
			async moreList(){
				if(this.finish) return
				this.page ++
				await this.getList();
				this.data = this.data.concat(this.dataList)
				this.checkFinish()
				this.$emit('setPageData', this.data)
			},
			async getList() {
				if(!this.action) return
				if(this.isLoading) return
				this.isLoading = true;
				this.anit = true
				this.LoadText = '正在加载···'
				const params = {
					page:this.page,
					size:this.size,
					...this.params
				}
                const res = await this.action(this.page,this.size,params,10)
				console.log('this.action',res)

                this.dataList = res.data
				this.total = res.total
				this.isLoading = false;
            },
			checkFinish(){
				this.finish = (!this.dataList.length||this.dataList.length<this.size||this.total<=this.data.length)
				if(this.finish) {
					this.LoadText = '没有更多了'
				}
			},

			loadData() {
				// 首次激活时被调用
				// console.log(156,'首次激活时被调用')
				// this.initData()
				this.refreStatus = true
			},
			clear() {
				// 释放数据时被调用，参考 swiper-list 缓存配置
				this.dataList.length = 0;
				this.data.length = 0;
			}
		}
	}
</script>

<style lang="scss" scoped>
	.uni-swiper-page {
		display: flex;
		flex: 1;
		flex-direction: column;
		justify-content: center;
		height: 100%;
	}
	.swiper-scroll {
		height: 100%;
		flex: 1;
		overflow: hidden;
	}
	.anit /deep/ .uni-scroll-view-refresher{
		transition: height .2s;
	}
	.anitnone /deep/ .uni-scroll-view-refresher{
		transition: height 0s;
	}
	
	.pannel{
		padding: 20rpx 0;
	}
	.swiper-item-list {
		padding: 30rpx;
		margin: 0 20rpx;
		background: #fff;
		border-radius: 20rpx;
		box-shadow: 0 0 16rpx rgba($color: #000000, $alpha: .05);
	}
	.bottom{
		text-align: center;
		padding: 20rpx 0 30rpx;
	}
	.top-btn{
		width: 70rpx;
		height: 70rpx;
		overflow: hidden;
		background-color: rgba($color: #000000, $alpha: .3);
		border-radius: 50%;
		font-size: 24rpx;
		color: #fff;
		display: flex;
		align-items: center;
		justify-content: center;
		opacity: 1;
		transition: opacity .2s;
		&.top-hide{
			opacity: 0;
		}
	}
	.top-hide{
		user-select: none;
		touch-action: none;
		pointer-events: none;
	}
</style>
